<template>
    <div class="login-register">
        <div class="contain">
            <div class="big-box" :class="{active:isLogin}">
                <!-- <form action="" :model="ruleForm"> -->
                <div class="big-contain" v-if="isLogin" :model="ruleForm" ref="ruleForm">
                    <div class="btitle">账户登录</div>
                    <div class="bform1" style="">
                        <input class="inputCss" type="text" placeholder="请输入用户名" v-model="ruleForm.username">
                        <!-- <span class="errTips" v-if="emailError">* 邮箱填写错误 *</span> -->
                        <input class="inputCss" type="password" placeholder="请输入密码" v-model="ruleForm.password">
                        <!-- <span class="errTips" v-if="emailError">* 密码填写错误 *</span> -->
                    </div>
                    <button class="bbutton" @click.prevent="submitForm('ruleForm')">登录</button>
                </div>
                <!-- </form> -->
                <!-- <form action=""> -->
                <div class="big-contain" v-else>
                    <div class="btitle">找回密码</div>
                    <div class="bform">
                        <input class="inputCss" type="text" placeholder="用户名" v-model="forgetForm.username">
                        <span class="errTips" v-if="existed">* 用户名已经存在！ *</span>
                        <input class="inputCss" type="email" placeholder="邮箱" v-model="forgetForm.useremail">
                        <div style="display:flex;justify-content:space-between;">
                            <input class="inputCss" style="width:45%;" type="text" placeholder="验证码"
                                v-model="forgetForm.vecode">
                            <button class="bbutton" style="width:35%;border-radius:10px"
                                @click.prevent="register">获取</button>
                        </div>
                        <input class="inputCss" type="password" placeholder="密码" v-model="forgetForm.vecode">
                    </div>
                    <button class="bbutton" @click.prevent="register">提交</button>
                </div>
                <!-- </form> -->
            </div>
            <div class="small-box" :class="{active:isLogin}">
                <div class="small-contain" v-if="isLogin">
                    <div class="stitle">你好，朋友!</div>
                    <p class="scontent">忘记密码？这里可以找回！</p>
                    <button class="sbutton" @click.prevent="changeForgetType">找回密码</button>
                </div>
                <div class="small-contain" v-else>
                    <div class="stitle">欢迎回来!</div>
                    <p class="scontent">与我们保持联系，请登录你的账户</p>
                    <button class="sbutton" @click.prevent="changeLoginType">登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login-register",
        data() {
            return {
                isLogin: true,
                emailError: false,
                passwordError: false,
                existed: false,
                form: {
                    username: "",
                    useremail: "",
                    userpwd: ""
                },

                // logining: false,
                ruleForm: {
                    username: "admin",
                    password: ""
                        // vecode: ""
                },
                forgetForm: {
                    username: "admin",
                    useremail: "",
                    vecode: ""
                },
                rules: {
                    username: [{
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }],
                    password: [{
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }],
                    vecode: [{
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur"
                    }]
                }
            };
        },
        methods: {
            changeForgetType() {
                this.isLogin = !this.isLogin;
                this.forgetForm.username = "";
                this.forgetForm.useremail = "";
                this.forgetForm.vecode = "";
            },
            changeLoginType() {
                this.isLogin = !this.isLogin;
                this.ruleForm.username = "";
                this.ruleForm.password = "";
            },
            // 新
            submitForm(formName) {
                this.$refs.ruleForm[0].validate(valid => {
                    if (valid) {
                        this.logining = true;
                        this.$http
                            // .post("/login", this.ruleForm2, {
                            //   headers: headers,
                            //   transformRequest: transformRequest
                            // })
                            .post("login", this.ruleForm)
                            .then(res => {
                                // console.log("ok");
                                // console.log(res);
                                // const { msg, code } = res.data;
                                const {
                                    data,
                                    meta: {
                                        msg,
                                        status
                                    }
                                } = res.data;
                                if (status === 200) {
                                    // if (code != "6298") {
                                    //     this.$message.error("请检查验证码");
                                    // }

                                    // 验证通过，登陆成功
                                    // 1. 提示成功
                                    this.logining = false;
                                    sessionStorage.setItem(
                                        "login",
                                        this.ruleForm.username
                                    );
                                    // 2. 跳转首页
                                    this.$message({
                                        message: "登陆成功！",
                                        type: "success"
                                    });
                                    this.$router.push({
                                        path: "/dashboard"
                                    });
                                } else {
                                    // 验证失败，登录不成功
                                    // 1. 提示错误
                                    // console.log(res.data);
                                    this.$message.error(
                                        "登陆失败！请检查用户名和密码！"
                                    );
                                }
                            })
                            .catch(err => {
                                console.error(err);
                            });
                        // } else {
                        //     // if (this.ruleForm == "") {
                        //     //     this.$message.error("登陆失败！请检查用户名和密码");
                        //     // } else if (this.code != "6298") {
                        //     //     this.$message.error("登陆失败！请检查验证码");
                        //     // }
                        //     this.$message.error("登陆失败！请检查验证码");
                        //     console.log(res.meta);
                        //     return false;
                        // }
                    }
                });
            },

            // 旧
            // login() {
            //     const self = this;
            //     if (self.form.useremail != "" && self.form.userpwd != "") {
            //         self.$axios({
            //             method: "post",
            //             url: "http://127.0.0.1:10520/api/user/login",
            //             data: {
            //                 email: self.form.useremail,
            //                 password: self.form.userpwd
            //             }
            //         })
            //             .then(res => {
            //                 switch (res.data) {
            //                     case 0:
            //                         alert("登陆成功！");
            //                         break;
            //                     case -1:
            //                         this.emailError = true;
            //                         break;
            //                     case 1:
            //                         this.passwordError = true;
            //                         break;
            //                 }
            //             })
            //             .catch(err => {
            //                 console.log(err);
            //             });
            //     } else {
            //         alert("填写不能为空！");
            //     }
            // },
            register() {
                const self = this;
                if (
                    self.form.username != "" &&
                    self.form.useremail != "" &&
                    self.form.userpwd != ""
                ) {
                    self.$axios({
                            method: "post",
                            url: "http://127.0.0.1:10520/api/user/add",
                            data: {
                                username: self.form.username,
                                email: self.form.useremail,
                                password: self.form.userpwd
                            }
                        })
                        .then(res => {
                            switch (res.data) {
                                case 0:
                                    alert("注册成功！");
                                    this.login();
                                    break;
                                case -1:
                                    this.existed = true;
                                    break;
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        });
                } else {
                    alert("填写不能为空！");
                }
            }
        }
    };
</script>

<style scoped="scoped">
    .login-register {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        background-color: rgb(245, 245, 245);
    }
    
    .contain {
        width: 60%;
        height: 60%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 0 3px #f0f0f0, 0 0 6px #f0f0f0;
    }
    
    .big-box {
        width: 70%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 30%;
        transform: translateX(0%);
        transition: all 1s;
    }
    
    .big-contain {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .login-contain {
        padding: 50px 0px;
    }
    
    .btitle {
        font-size: 1.5em;
        font-weight: bold;
        color: rgb(98, 148, 224);
    }
    
    .bform1 {
        width: 100%;
        height: 30%;
        margin: 28px 0;
        padding: 2em 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    
    .bform1 .errTips {
        display: block;
        width: 50%;
        text-align: left;
        color: red;
        font-size: 0.7em;
        margin-left: 1em;
    }
    
    .bform1 input {
        width: 50%;
        height: 45px;
        border: none;
        outline: none;
        border-radius: 10px;
        padding-left: 2em;
        background-color: #f0f0f0;
    }
    
    .bform {
        width: 100%;
        height: 40%;
        padding: 2em 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    
    .bform .errTips {
        display: block;
        width: 50%;
        text-align: left;
        color: red;
        font-size: 0.7em;
        margin-left: 1em;
    }
    
    .bform input {
        width: 50%;
        height: 45px;
        border: none;
        outline: none;
        border-radius: 10px;
        padding-left: 2em;
        background-color: #f0f0f0;
    }
    
    .bbutton {
        width: 25%;
        height: 40px;
        border-radius: 24px;
        border: none;
        outline: none;
        background-color: rgb(34, 68, 119);
        color: #fff;
        font-size: 0.9em;
        cursor: pointer;
    }
    
    .small-box {
        width: 30%;
        height: 100%;
        /* rgb(50, 65, 87) */
        background: linear-gradient(135deg, rgb(98, 148, 224), rgb(32, 74, 138));
        /* background: linear-gradient(135deg, rgb(57, 167, 176), rgb(56, 183, 145)); */
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(0%);
        transition: all 1s;
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
    }
    
    .small-contain {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .stitle {
        font-size: 1.5em;
        font-weight: bold;
        color: #fff;
    }
    
    .scontent {
        font-size: 0.8em;
        color: #fff;
        text-align: center;
        padding: 2em 4em;
        line-height: 1.7em;
    }
    
    .sbutton {
        width: 60%;
        height: 40px;
        border-radius: 24px;
        border: 1px solid #fff;
        outline: none;
        background-color: transparent;
        color: #fff;
        font-size: 0.9em;
        cursor: pointer;
    }
    
    .big-box.active {
        left: 0;
        transition: all 0.5s;
    }
    
    .small-box.active {
        left: 100%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: inherit;
        border-bottom-right-radius: inherit;
        transform: translateX(-100%);
        transition: all 1s;
    }
</style>